<template>
    <apply-header process-name="用车申请" @submit-click="submit" @cancel-click="cancelClick"/>
    <div class="vehicle-apply-form">
        <el-form :model="vehicleFormData" ref="vehicleApplyFormRef" :rules="rules" label-position="left" label-suffix="：" label-width="120px">
            <form-title title="用车申请"/>
            <el-row>
                <el-col :span="7">
                    <el-form-item label="申请人员" class="required" prop="empName">
                        <el-input v-model="vehicleFormData.empName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="5">
                    <el-form-item label="选择车辆" style="position: relative" prop="vehicleId">
                        <el-button :icon="Search" @click="choiceVehicleClick"></el-button>
                        <div style="display: none">
                            <el-input v-model="vehicleFormData.vehicleId"/>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="车辆品牌" prop="brand">
                        <el-input v-model="vehicleFormData.brand" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="2">
                    <el-form-item label="车牌号" prop="licensePlate">
                        <el-input v-model="vehicleFormData.licensePlate" disabled/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="预计开始使用时间" label-width="150px" prop="kaishiTime">
                        <el-date-picker type="datetime" v-model="vehicleFormData.kaishiTime" placeholder="开始使用时间" value-format="YYYY-MM-DD hh:mm:ss"/>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item label="预计结束使用时间" label-width="150px" prop="jieshuTime">
                        <el-date-picker type="datetime" v-model="vehicleFormData.jieshuTime" placeholder="结束使用时间" value-format="YYYY-MM-DD hh:mm:ss"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="申请事由" prop="cause">
                        <el-input type="textarea" v-model="vehicleFormData.cause" rows="3" placeholder="请输入申请事由"/>
                    </el-form-item>
                </el-col>
            </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="审批人员" prop="admSpecialist">
                <el-select-v2 :options="assessingOptions" v-model="vehicleFormData.admSpecialist" placeholder="选择审批人员"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
    </div>
    <vehicle-rent-box ref="vehicleRentBoxRef" @choice-click="handleChoiceVehicle"/>
</template>

<script>
import ApplyHeader from "../../com/apply/ApplyHeader.vue";
import {Search} from '@element-plus/icons-vue'
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import FormTitle from "../../com/apply/FormTitle.vue";
import VehicleRentBox from "./comps/VehicleRentBox.vue";
import {ElMessage} from "element-plus";
import {createVehiclePy, getAssessingOfficer} from "../../../network/process/vehicle-process";

export default {
    name: "VehicleApply",
    components: {VehicleRentBox, FormTitle, ApplyHeader},
    setup(props,{emit}){
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const vehicleApplyFormRef = ref(null);
        const executeFn = reactive({
            cancelClick(){
                globalProperties.$operate.confirm({
                    hint: '你确定要取消申请吗？',
                    title: '取消车辆申请',
                    executeFn(){
                        let returnUrl = globalProperties.$route.query.returnUrl;
                        if(returnUrl){
                            globalProperties.$router.push(returnUrl);
                        }
                    }
                })
            }
        })
        const validateApplyUser = function (rule,value,callback){
            if(value===null || value===''){
                callback(new Error('申请用户没有'));
            }
            callback();
        }
        const formResourceData = function (){
            return {
                empId: null,
                empName: null,
                brand: null,
                cause: null,
                vehicleId: null,
                licensePlate: null,
                kaishiTime: null,
                jieshuTime: null,
              admSpecialist: null
            }
        }
        const form = reactive({
            vehicleFormData: formResourceData(),
            rules:{
                empName:[
                    {validator: validateApplyUser,trigger: 'blur'}
                ],
                cause: [
                    {required: true,message: '请输入申请原由', trigger: 'blur'}
                ],
                vehicleId: [
                    {required: true,message: '请选择要租借的车辆', trigger: 'change'}
                ],
                // brand: [
                //     {required: true,message: '请选择要申请的车辆', trigger: 'blur'}
                // ],
                // licensePlate: [
                //     {required: true,message: '车牌号', trigger: 'blur'}
                // ],
                kaishiTime: [
                    {required: true,message: '请输入开始使用时间',trigger: 'blur'}
                ],
                jieshuTime: [
                    {required: true,message: '请输入结束使用时间',trigger: 'blur'}
                ],
              admSpecialist: [
                {required: true,message: '请选择审批人员',trigger: 'blur'}
              ]
            },
            submit(){
                vehicleApplyFormRef.value.validate((valid)=>{
                    if(valid){
                        console.log('form.vehicleFormData',form.vehicleFormData)
                      form.vehicleFormData.empName = globalProperties.$store.state.loginUser.empName;
                        createVehiclePy(form.vehicleFormData).then(vo=>{
                            globalProperties.$response.handle({
                                data: vo,
                                success: '申请成功',
                                successFn: ()=>{
                                    let returnUrl = globalProperties.$route.query.returnUrl;
                                    globalProperties.$operate.confirm({
                                        title: '返回操作页面',
                                        hint: '是否立即返回操作页面',
                                        executeFn:()=>{
                                            globalProperties.$router.push(returnUrl);
                                        }
                                    })
                                    form.vehicleFormData = formResourceData();
                                },
                                log: '添加车辆申请结果'
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单');
                    }
                })
            },
            resetForm(){
                vehicleApplyFormRef.value.clearValidate();
                vehicleApplyFormRef.value.resetFields();
            }
        })
        return {
            vehicleApplyFormRef,
            ...toRefs(executeFn),
            ...toRefs(form),
            Search
        }
    },
    data(){
        return{
            vehicleBox: false,
          assessingOptions: []
        }
    },
    methods: {
        handleChoiceVehicle({id,brand,licensePlate}){
            this.vehicleFormData.vehicleId = id;
            this.vehicleFormData.brand = brand;
            this.vehicleFormData.licensePlate = licensePlate;
        },
        choiceVehicleClick(){
            this.$refs.vehicleRentBoxRef.visible = true;
        },
      init(){
          getAssessingOfficer().then(vo=>{
            this.$response.handle({
              data: vo,
              successFn: ()=>{
                vo.data.forEach(e=>{
                  this.assessingOptions.push({
                    label: e.empName,
                    value: e.id
                  })
                })
              },
              log: '审批人员'
            })
          })
      }
    },
    created() {
      this.init();
    },
    watch:{
        '$store.state.loginUser.empName'(){
            this.vehicleFormData.empName = this.$store.state.loginUser.empName;
            this.vehicleFormData.empId = this.$store.state.loginUser.id;
        }
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.vehicle-box{
    position: absolute;
    top: 100%;
    z-index: 99;
    width: 400px;
    height: 300px;
}
.vehicle-apply-form{
    margin: 0 auto;
    width: 1200px;
    box-shadow: 0 0 2px 1px lightgrey;
    background: rgb(252,252,252);
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
<style>
.el-time-spinner__item{
    width: 100%;
}
</style>
